<template>
	<view class="container">
		<view class="title_top">
			<view class="title_text">Deposito</view>
			<view class="back" @click="back">
				<up-icon name="close" color="#fff" size="14"></up-icon>
			</view>
		</view>
		<view class="text1">Valor a ser depositado：</view>
		<view class="card_v">
			<view class="list1">
				<view class="t_title">Chaves cadastradas</view>
				<view class="t_tip">Selecionar chave</view>
			</view>
			<view class="list2">
				<up-checkbox
					:customStyle="{ marginBottom: '8px' }"
					label="Nova chave"
					labelColor="#fff"
					activeColor="#4FAA71"
					name="agree"
					usedAlone
					shape="circle"
					v-model:checked="checked1"
				></up-checkbox>
			</view>
		</view>
		<view class="text2">Você não pode realizar saques para terceiros. Saque somente é válido para contas de sua titularidade.</view>
		<view class="text3">Seu saque está quase pronto</view>
		<view class="text4">Só falta o seu CPF para deixar tudo pronto</view>

		<view class="inputs">
			<view class="input_name">CPF</view>
			<up-input placeholder="CPF" border="none" v-model="cpf_v" :customStyle="inputStyle" color="#fff">
				<template #prefix>
					<view class="unit">
						<image class="fin_icon" v-if="cpf_index == 1" src="@/static/images/user/fin1.png" mode=""></image>
						<image class="fin_icon" v-else-if="cpf_index == 2" src="@/static/images/user/fin2.png" mode=""></image>
						<image class="fin_icon" v-else src="@/static/images/user/fin3.png" mode=""></image>
					</view>
				</template>
			</up-input>
		</view>
		<view class="changeBox">
			<up-checkbox :customStyle="{ marginBottom: '8px' }" labelColor="#fff" activeColor="#4FAA71" name="agree" usedAlone v-model:checked="checked2">
				<template #label>
					<view class="label_text">Asseguro que todas as informações fornecidas são verdadeiras e pertencem a mim.</view>
				</template>
			</up-checkbox>
		</view>

		<view class="btns">
			<up-button color="#454757" :customStyle="btnStyle" @click="clickBtn(1)">
				<image class="btn_icon" src="@/static/images/shop/back_icon.png" mode=""></image>
				<view class="btn_text">Voltar</view>
			</up-button>
			<up-button color="#0ACF83" :customStyle="btnStyle" @click="clickBtn(2)">
				<image class="btn_icon" src="@/static/images/search/btn_img.png" mode=""></image>
				<view class="btn_text">DEPOSITAR</view>
			</up-button>
		</view>
	</view>
</template>

<script setup>
import { ref, reactive, onMounted, watch } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';

const cpf_v = ref('');
const cpf_index = ref(1);
const checked1 = ref(false);
const checked2 = ref(false);

const inputStyle = {
	height: '78rpx',
	borderRadius: '12rpx',
	background: '#242632',
	padding: '0 12rpx'
};
const btnStyle = {
	height: '78rpx',
	borderRadius: '12rpx',
	fontSize: '32rpx',
	color: '#333',
	fontWeight: 700,
	width: '300rpx'
};

onMounted(() => {});

const back = () => {
	uni.navigateBack();
};
</script>

<style lang="scss" scoped>
.container {
	background-color: #19191f;
	width: 100vw;
	padding: 88rpx 58rpx 44rpx;
	box-sizing: border-box;
	.title_top {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 36rpx;
		line-height: 40rpx;
		font-weight: 700;
		.back {
			width: 56rpx;
			height: 56rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #020203;
			border-radius: 12rpx;
		}
	}
	.text1 {
		margin-top: 30rpx;
		font-size: 24rpx;
		font-weight: 700;
	}
	.card_v {
		margin-top: 40rpx;
		border: 2px solid #454757;
		border-radius: 12rpx;
		.list1 {
			height: 118rpx;
			border-bottom: 2px solid #454757;
			padding: 0 30rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			box-sizing: border-box;
			background-color: #242632;
			.t_title {
				font-size: 32rpx;
				line-height: 40rpx;
				font-weight: 600;
			}
			.t_tip {
				font-size: 24rpx;
				color: #3d3d3d;
				margin-top: 10rpx;
			}
		}
		.list2 {
			height: 178rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			padding: 0 30rpx;
		}
	}
	.text2 {
		margin-top: 32rpx;
		font-size: 24rpx;
		line-height: 40rpx;
		color: #fb923c;
		text-align: center;
	}
	.text3 {
		margin-top: 16rpx;
		font-size: 24rpx;
		text-align: center;
		font-weight: 900;
	}
	.text4 {
		font-size: 24rpx;
		line-height: 40rpx;
		margin-top: 24rpx;
		color: #3d3d3d;
		text-align: center;
	}
	.inputs {
		margin-top: 110rpx;
		.input_name {
			font-size: 24rpx;
			font-weight: 900;
			color: #7e84a0;
			margin-bottom: 8rpx;
		}
		.unit {
			margin-right: 12rpx;
			.fin_icon {
				width: 40rpx;
				height: 40rpx;
				display: block;
			}
		}
	}
	.changeBox {
		margin-top: 20rpx;
		.label_text {
			width: 600rpx;
			margin-left: 15rpx;
			color: #7e84a0;
			font-size: 24rpx;
			line-height: 40rpx;
			font-weight: 900;
		}
	}

	.btns {
		margin-top: 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;

		.btn_icon {
			width: 44rpx;
			height: 44rpx;
			display: block;
			margin-right: 20rpx;
		}
		.btn_text {
			font-size: 32rpx;
			line-height: 40rpx;
			color: #fff;
		}
	}
}
</style>
